/**
 * 公共样式变量文件
 * 基于首页样式特征和UI风格.js制定的统一变量系统
 * 确保整个小程序的样式一致性
 */

// ==================== 色彩系统 ====================

// 主色调
$primary-blue: #42bbff; // 主要蓝色 - 用于主要交互元素
$sky-blue: #87ceeb; // 天空蓝 - 用于渐变和辅助元素
$coral: #ff9595; // 珊瑚色 - 用于警告和强调
$peach: #ffb347; // 桃橙色 - 用于温暖提示
$forest-green: #32cd32; // 森林绿 - 用于成功状态
$light-green: #98fb98; // 浅绿色 - 用于绿色渐变
$purple: #9370db; // 紫罗兰 - 用于特殊功能
$light-purple: #dda0dd; // 浅紫色 - 用于紫色渐变
$golden: #ffd700; // 金黄色 - 用于进度和成就

// 中性色
$dark-gray: #1e293b; // 深色文字
$medium-gray: #94a3b8; // 中等灰色文字
$light-gray: #f1f5f9; // 浅灰背景
$border-gray: #e4e4e4; // 边框颜色
$white: #ffffff; // 白色
$black: #000000; // 黑色

// 灰色色阶 (Tailwind CSS 风格)
$gray-50: #f9fafb;
$gray-100: #f3f4f6;
$gray-200: #e5e7eb;
$gray-300: #d1d5db;
$gray-400: #9ca3af;
$gray-500: #6b7280;
$gray-600: #4b5563;
$gray-700: #374151;
$gray-800: #1f2937;
$gray-900: #111827;

// 蓝色色阶
$blue-50: #eff6ff;
$blue-100: #dbeafe;
$blue-200: #bfdbfe;
$blue-300: #93c5fd;
$blue-400: #60a5fa;
$blue-500: #3b82f6;
$blue-600: #2563eb;
$blue-700: #1d4ed8;
$blue-800: #1e40af;
$blue-900: #1e3a8a;

// 背景色
$bg-ocean: #e0f6ff; // 海洋蓝背景
$bg-forest: #f0fff0; // 森林绿背景
$bg-sunset: #fff5ee; // 日落橙背景

// 透明度色彩
$white-90: rgba(255, 255, 255, 0.9);
$white-80: rgba(255, 255, 255, 0.8);
$white-70: rgba(255, 255, 255, 0.7);
$white-50: rgba(255, 255, 255, 0.5);
$white-30: rgba(255, 255, 255, 0.3);
$white-20: rgba(255, 255, 255, 0.2);
$white-10: rgba(255, 255, 255, 0.1);

$black-90: rgba(0, 0, 0, 0.9);
$black-80: rgba(0, 0, 0, 0.8);
$black-50: rgba(0, 0, 0, 0.5);
$black-30: rgba(0, 0, 0, 0.3);
$black-20: rgba(0, 0, 0, 0.2);
$black-10: rgba(0, 0, 0, 0.1);
$black-08: rgba(0, 0, 0, 0.08);
$black-05: rgba(0, 0, 0, 0.05);

// ==================== 渐变系统 ====================

// 背景渐变
$bg-gradient: linear-gradient(135deg, #{$bg-ocean} 0%, #{$bg-forest} 50%, #{$bg-sunset} 100%);

// 功能渐变
$blue-gradient: linear-gradient(135deg, #{$primary-blue} 0%, #{$sky-blue} 100%);
$coral-gradient: linear-gradient(135deg, rgba(255, 149, 149, 0.8) 0%, rgba(255, 179, 71, 0.8) 100%);
$green-gradient: linear-gradient(135deg, #{$forest-green} 0%, #{$light-green} 100%);
$purple-gradient: linear-gradient(135deg, #{$purple} 0%, #{$light-purple} 100%);
$yellow-gradient: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); // 黄色渐变，用于绘本数量标签

// 进度渐变
$progress-gradient: linear-gradient(90deg, #{$golden} 0%, #{$white} 100%);
$progress-enhanced-gradient: linear-gradient(90deg, #{$golden} 0%, #ffed4e 50%, #{$white} 100%);

// ==================== 字体系统 ====================

// 字体族
$font-family: 'Inter', sans-serif;

// 字号
$font-size-xs: 10px; // 极小文字 - 标签
$font-size-sm: 12px; // 小文字 - 辅助信息
$font-size-base: 14px; // 基础文字 - 正文
$font-size-md: 16px; // 中等文字 - 重要正文
$font-size-lg: 18px; // 大文字 - 小标题
$font-size-xl: 20px; // 特大文字 - 标题
$font-size-2xl: 22px; // 超大文字 - 页面标题
$font-size-3xl: 24px; // 最大文字 - 主标题

// 字重
$font-weight-light: 300; // 细体
$font-weight-regular: 400; // 常规
$font-weight-medium: 500; // 中等
$font-weight-semibold: 600; // 半粗
$font-weight-bold: 700; // 粗体
$font-weight-extrabold: 800; // 超粗

// 行高
$line-height-tight: 1.2; // 紧密行高
$line-height-normal: 1.4; // 标准行高
$line-height-relaxed: 1.6; // 宽松行高

// ==================== 间距系统 ====================

// 基础间距单位 (8px基础网格)
$spacing-xs: 4px; // 极小间距
$spacing-sm: 8px; // 小间距
$spacing-md: 12px; // 中等间距
$spacing-lg: 16px; // 大间距
$spacing-xl: 20px; // 特大间距
$spacing-2xl: 24px; // 超大间距
$spacing-3xl: 32px; // 最大间距

// 特定用途间距
$container-padding: 15px; // 主容器内边距
$section-margin: 20px; // 区块间距
$card-padding: 20px; // 卡片内边距
$card-padding-lg: 24px; // 大卡片内边距
$button-padding-sm: 8px 16px; // 小按钮内边距
$button-padding-md: 12px 20px; // 中按钮内边距
$button-padding-lg: 16px 32px; // 大按钮内边距

// ==================== 圆角系统 ====================

$border-radius-xs: 6px; // 极小圆角
$border-radius-sm: 8px; // 小圆角 - 徽章、小图标
$border-radius-md: 12px; // 中等圆角 - 绘本封面
$border-radius-lg: 16px; // 大圆角 - 卡片内元素
$border-radius-xl: 20px; // 特大圆角 - 标准卡片
$border-radius-2xl: 24px; // 超大圆角 - 按钮、输入框
$border-radius-3xl: 28px; // 最大圆角 - 大按钮
$border-radius-full: 50%; // 圆形

// ==================== 阴影系统 ====================

// 标准阴影
$shadow-xs: 0 1px 2px #{$black-05};
$shadow-sm: 0 2px 4px #{$black-05};
$shadow-md: 0 4px 12px #{$black-10};
$shadow-lg: 0 4px 16px #{$black-08};
$shadow-xl: 0 8px 24px #{$black-10};
$shadow-2xl: 0 12px 32px #{$black-10};

// 彩色阴影
$shadow-blue: 0 4px 12px rgba(66, 187, 255, 0.3);
$shadow-blue-lg: 0 6px 16px rgba(66, 187, 255, 0.4);
$shadow-coral: 0 4px 16px rgba(255, 149, 149, 0.3);
$shadow-green: 0 4px 12px rgba(50, 205, 50, 0.3);
$shadow-purple: 0 4px 12px rgba(147, 112, 219, 0.3);
$shadow-golden: 0 0 10px rgba(255, 215, 0, 0.6);
$shadow-yellow: 0 2px 8px rgba(255, 215, 0, 0.4); // 黄色阴影，用于绘本数量标签

// ==================== 动画系统 ====================

// 过渡时间
$transition-fast: 0.15s; // 快速过渡
$transition-normal: 0.3s; // 标准过渡
$transition-slow: 0.5s; // 慢速过渡
$transition-progress: 0.8s; // 进度条过渡

// 缓动函数
$ease-linear: linear;
$ease-in: cubic-bezier(0.4, 0, 1, 1);
$ease-out: cubic-bezier(0, 0, 0.2, 1);
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
$ease-bounce: cubic-bezier(0.25, 0.46, 0.45, 0.94);

// 标准过渡
$transition-all: all $transition-normal $ease-in-out;
$transition-colors:
  color $transition-fast $ease-in-out,
  background-color $transition-fast $ease-in-out;
$transition-transform: transform $transition-normal $ease-in-out;
$transition-opacity: opacity $transition-fast $ease-in-out;

// ==================== 尺寸系统 ====================

// 标准高度
$height-xs: 24px; // 极小高度
$height-sm: 32px; // 小高度
$height-md: 40px; // 中等高度
$height-lg: 44px; // 大高度 - 搜索框
$height-xl: 56px; // 特大高度 - 主按钮
$height-2xl: 64px; // 超大高度

// 图标尺寸
$icon-xs: 12px;
$icon-sm: 16px;
$icon-md: 20px;
$icon-lg: 24px;
$icon-xl: 32px;
$icon-2xl: 48px;

// 头像尺寸
$avatar-sm: 32px;
$avatar-md: 48px;
$avatar-lg: 64px;
$avatar-xl: 80px;

// ==================== Z-index层级 ====================

$z-index-hide: -1;
$z-index-auto: auto;
$z-index-base: 0;
$z-index-docked: 10;
$z-index-dropdown: 1000;
$z-index-sticky: 1100;
$z-index-banner: 1200;
$z-index-overlay: 1300;
$z-index-modal: 1400;
$z-index-popover: 1500;
$z-index-tooltip: 1800;

// ==================== 断点系统 ====================

$breakpoint-xs: 320px;
$breakpoint-sm: 375px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1200px;

// ==================== 特殊效果 ====================

// 毛玻璃效果
$glass-blur: blur(10px);
$glass-blur-sm: blur(5px);
$glass-blur-lg: blur(20px);

// 边框
$border-width: 1px;
$border-width-thick: 2px;
$border-style: solid;
$border-color: $border-gray;
$border-color-light: $white-20;

// ==================== 网格系统 ====================

$grid-columns: 12;
$grid-gutter: 16px;
$grid-margin: 20px;

// ==================== 儿童阅读专用变量 ====================

// 绘本相关
$book-cover-width: 108px; // 调整为与30%网格宽度视觉一致
$book-cover-height: 120px; // 与首页保持一致的高度
$book-cover-radius: $border-radius-md;

// 进度相关
$progress-height: 8px;
$progress-height-sm: 4px;
$progress-height-lg: 12px;

// 分类标签
$category-icon-size: 56px;
$category-padding: $spacing-lg;

// 计划卡片
$plan-card-height: 180px;
$plan-cover-width: 88px;
$plan-cover-height: 120px;

// 音频播放器
$audio-player-height: 64px;
$play-button-size: 48px;

// ==================== 常用混合器 ====================

// 毛玻璃效果混合器
@mixin glass-effect($opacity: 0.9, $blur: $glass-blur) {
  background: rgba(255, 255, 255, $opacity);
  backdrop-filter: $blur;
  border: $border-width $border-style $border-color-light;
}

// 悬停效果混合器
@mixin hover-lift($distance: -2px) {
  transition: $transition-all;

  &:hover {
    transform: translateY($distance);
  }
}

// 点击效果混合器
@mixin click-scale($scale: 0.95) {
  transition: $transition-all;

  &:active {
    transform: scale($scale);
  }
}

// 渐变按钮混合器
@mixin gradient-button($gradient, $shadow, $text-color: $white) {
  background: $gradient;
  color: $text-color;
  border: none;
  border-radius: $border-radius-2xl;
  box-shadow: $shadow;
  font-family: $font-family;
  font-weight: $font-weight-medium;
  cursor: pointer;
  transition: $transition-all;

  &:hover {
    box-shadow: $shadow-blue-lg;
  }

  &:active {
    transform: scale(0.95);
  }
}

// 卡片容器混合器
@mixin card-container {
  @include glass-effect;
  border-radius: $border-radius-xl;
  padding: $card-padding;
  margin-bottom: $section-margin;
  box-shadow: $shadow-lg;
  gap: $spacing-lg;
  @include hover-lift;
}

// 文字截断混合器
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文字截断混合器
@mixin text-ellipsis-multiline($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// 居中混合器
@mixin center-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 左对齐混合器
@mixin start-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

// 两端对齐混合器
@mixin space-between-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// 响应式混合器
@mixin mobile {
  @media (max-width: #{$breakpoint-sm - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: $breakpoint-sm) and (max-width: #{$breakpoint-md - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: $breakpoint-md) {
    @content;
  }
}
